<template>
  <div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="商品id" value="shopid"></el-option>
          <el-option label="商品名称" value="name"></el-option>
          <el-option label="商品价格" value="pirce"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
      </el-input>
    </div>
    <el-table
      :data="arr"
      style="width: 100%"
    >
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <img :src="'http://localhost:3000/'+scope.row.img" width="40" height="40" />
        
        </template>
      </el-table-column>
      <el-table-column label="商品id" prop="shopid"></el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="商品价格" prop="pirce"></el-table-column>
      <el-table-column label="剩余库存" prop="stock"></el-table-column>
      <el-table-column label="商品类型" prop="bool"></el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <!-- // @click="dialogFormVisible = true,tab=true" -->
          <el-button size="mini" type="danger" @click="addadmin">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="reviseShop(scope.$index, scope.row),tab=false">修改信息</el-button>
          <el-button size="mini" type="danger" @click="deleteAdmin(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="pagedata.currentPage"
        :page-sizes="[1, 2, 3, 4,]"
        :page-size="pagedata.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagedata.total"
        @size-change="changePageSize"
        @current-change="changeCurrent"
        @prev-click="sub()"
        @next-click="add()"
      ></el-pagination>
    </div>
    <el-dialog title="新增商铺" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品id" :label-width="formLabelWidth">
          <el-input v-model="shopid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="pirce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-input v-model="bool" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" :label-width="formLabelWidth">
          <el-input v-model="stock" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add" v-if="tab">确认新增</el-button>
        <el-button type="primary" @click="revise" v-if="!tab">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { request } from "../../network/request";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("admin");
export default {
 
  computed: {
    ...mapState(["arr", "page"]) //获取后端数据库的学生数组
  },
  data() {
    return {
      search: "",
      input3: "",
      select: "",
      // total: "",
      tab: "",
      data: 5,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      shopid: "",
      name: "",
      pirce: "",


      bool: "",
      stock: "",
      _id: "",
      currentdata4: 4,
      pagedata: {
        currentPage: 1,
        pageSize: 3,
        total: ""
      }
    };
  },
  methods: {
    ...mapActions([
      "getAdmin",
      "frozen",
      " thaw",
      "addAdmin",
      "delAdmin",
      "queryAdmin",
      "reviseAdmin"
    ]),
    addadmin() {
      this.$router.push({
        path: "/system/addAdmin",
        query: ""
      });
    },
    //切换每页显示条数
    changePageSize(val) {
      //  this.pagedata.pageSize=page
      console.log(val);
      this.pagedata.pageSize = val;
      this.getAdmin(this.pagedata);
    },
    //切换页码
    changeCurrent(val) {
      this.pagedata.currentPage = val;
      this.getAdmin(this.pagedata);
    },
    //下一页
    add() {
      this.pagedata.currentPage++;
      this.getAdmin(this.pagedata);
    },
    //上一页
    sub() {
      this.pagedata.currentPage--;
      this.getAdmin(this.pagedata);
    },
    //修改店铺信息
    reviseShop(index, row) {
      // console.log(index, row);
      this.dialogFormVisible = true;
      this.shopid = row.shopid;
      this.name = row.name;
      this.pirce = row.pirce;
      this.bool = row.bool;
      this.stock = row.stock;
      this._id = row._id;
    },

    //修改
    async revise() {
      this.tab = false;
      const data = await this.reviseAdmin({
        shopid: this.shopid,
        name: this.name,
        pirce: this.pirce,
        bool: this.bool,
        stock: this.stock,
        _id: this._id
      });
      // console.log(data);
      if (data.success) {
        this.dialogFormVisible = false;
        this.getAdmin(this.pagedata);
      }
    },
    //删除
    async deleteAdmin(index, row) {
      const data = await this.delAdmin({ _id: row._id });
      if (data.success) {
        this.getAdmin(this.pagedata);
      }
    },

    // //新增
    // async add() {
    //   //  console.log(index,row)
    //   this.dialogFormVisible = false;
    //   // this.tab=true;
    //   const data = await this.addAdmin({
    //     name: this.name,
    //     pirce: this.pirce,
    //     shopid: this.shopid,
    //     bool: this.bool,
    //     stock: this.stock
    //   });
    //   if (data.success) {
    //     this.getAdmin(this.pagedata);
    //   }
    //   console.log(data);
    // },
    //查询
    query() {
      this.queryAdmin({ choose: this.select, value: this.input3 });
      // console.log(this.select,this.input3)
    },
    getPage() {
      this.pagedata = this.page;
    }
  },
  created() { this.getAdmin({
      currentPage: this.pagedata.currentPage,
      pageSize: this.pagedata.pageSize
    });
    this.getPage();
    // console.log(this.arr)
   
  }
};
</script>

<style>
</style>